<template>
  <div>
    <div class="store line flex">
      <div class="left">
        <div class="name">{{ store.storeName }}</div>
        <div class="flex">
          <div v-if="isWorking" class="tag">营业中</div>
          <div v-else class="finish">结束营业</div>
          <div style="display: flex; gap: 10px">
            <div v-for="(item, i) in currentWorkTimes" :key="i" class="time">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="right" @click="callPhone">
        <img
          src="https://pics.leshiguang.com/vpage/2024/05/17/55b5d23e1d58404489d0e6c90dbbf090.png"
          alt=""
        />
        <div class="phone">电话</div>
      </div>
    </div>

    <div class="address" @click="goMap">
      <div class="detail">
        {{ address }}
        <img
          v-if="canGoMap"
          src="https://pics.leshiguang.com/vpage/2023/08/23/6dc21ea8b2714d18829f8024d051bed1.png"
          alt=""
        />
      </div>
      <div v-if="distanceDesc" class="desc">{{ distanceDesc }}</div>
      <div v-else class="desc" style="opacity: 0.5;">未知</div>
    </div>
  </div>
</template>

<script>
import { isWorkingInTime } from "../parseTime";

export default {
  props: {
    store: {
      type: Object,
      default: () => {
        return {};
      },
    },
    canGoMap: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      storeId: 0,
      item: {},
    };
  },
  computed: {
    address() {
      if (!this.store.storeId) return "";
      let store = this.store;
      return `${store.provinceName}${store.cityName}${store.countyName}${store.areaName}${store.address}`;
    },
    isWorking() {
      const times = this.currentWorkTimes;
      console.warn('test', times)
      let flag = false;
      for (let i = 0; i < times.length; i++) {
        const timeStr = times[i];
        flag = isWorkingInTime(timeStr);
        if (flag) {
          return true;
        }
      }
      return false;
    },
    currentWorkTimes() {
      if (this.store.times.length > 0) {
        return this.store.times[(new Date().getDay() - 1) % 7];
      }
      return [];
      
    },
    distanceDesc() {
      if (this.store.distance === 0 || this.store.distance) {
        if (this.store.distance < 1) {
          return `${Math.floor(this.store.distance * 1000)}m`;
        } else {
          return `${this.store.distance.toFixed(1)}km`;
        }
      } else {
        return "";
      }
    },
  },
  methods: {
    callPhone() {
      if (!this.store.storeTel) return;
      uni.makePhoneCall({
        phoneNumber: this.store.storeTel, //仅为示例 this.servicePhone是你要拨打的电话号码
      });
    },

    goMap() {
      if (!this.canGoMap) return;
      this.$urouter.navigateTo({
        url: "/pagesStore/storeMap",
        params: {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}

.line {
  border-bottom: 1px solid rgba(34, 34, 34, 0.12);
}

.store {
  padding: 4px 0 12px 0;
  justify-content: space-between;
  .left {
    .name {
      font-size: 20px;
      color: #222;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .tag {
      font-size: 12px;
      color: #00ce6b;
      font-weight: bold;
      margin-right: 8px;
    }
    .finish {
      font-size: 12px;
      color: red;
      font-weight: bold;
      margin-right: 8px;
    }

    .time {
      font-size: 12px;
      color: #222;
    }
  }
  .right {
    display: flex;
    align-items: center;
    flex-direction: column;
    img {
      width: 28px;
      height: 28px;
      margin-bottom: 2px;
    }
    .phone {
      font-size: 11px;
      font-weight: bold;
      color: #057691;
    }
  }
}

.address {
  padding: 16px 0;
  .detail {
    font-size: 12px;
    color: #222;
    display: inline-flex;
    align-items: center;
    img {
      width: 16px;
      height: 16px;
    }
  }
  .desc {
    color: #222;
    opacity: 0.5;
    font-size: 12px;
  }
}
</style>
